<template>
    <view class="order-detail-container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
            </view>
            <view class="page-title">订单详情</view>
            <view class="placeholder"></view>
        </view>

        <!-- 订单状态卡片 -->
        <view class="status-card">
            <view class="status-header">
                <view class="status-label">状态：</view>
                <view class="status-value" :class="'status-' + orderInfo.statusCode">{{ orderInfo.statusText }}</view>
            </view>
            <view class="status-desc">{{ orderInfo.statusDescription }}</view>
        </view>

        <!-- 订单信息卡片 -->
        <view class="section info-card">
            <view class="info-item">
                <view class="info-label">订单编号</view>
                <view class="info-value">{{ orderInfo.orderNo }}</view>
            </view>
            <view class="info-item">
                <view class="info-label">预约时间</view>
                <view class="info-value">{{ orderInfo.appointmentTime }}</view>
            </view>
            <view class="info-item">
                <view class="info-label">回收内容</view>
                <view class="info-value">{{ orderInfo.recycleContent }}</view>
            </view>
            <view class="info-item">
                <view class="info-label">预估重量</view>
                <view class="info-value">{{ orderInfo.estimatedWeight }}kg</view>
            </view>
            <view class="info-item" v-if="orderInfo.actualWeight">
                <view class="info-label">实际重量</view>
                <view class="info-value">{{ orderInfo.actualWeight }}kg</view>
            </view>
        </view>

        <!-- 回收地址卡片 -->
        <view class="section address-card">
            <view class="section-title">回收地址</view>
            <view class="address-content">
                <view class="contact-info">
                    <text class="contact-name">{{ orderInfo.address.name }}</text>
                    <text class="contact-phone">{{ orderInfo.address.phone }}</text>
                </view>
                <view class="address-detail">{{ orderInfo.address.detail }}</view>
            </view>
        </view>

        <!-- 备注信息 -->
        <view class="section remark-card" v-if="orderInfo.remark">
            <view class="section-title">备注信息</view>
            <view class="remark-content">{{ orderInfo.remark }}</view>
        </view>

        <!-- 积分信息 -->
        <view class="section points-card">
            <view class="section-title">积分信息</view>
            <view class="points-content">
                <view class="points-item">
                    <view class="points-label">预估积分</view>
                    <view class="points-value">+{{ orderInfo.estimatedPoints }}</view>
                </view>
                <view class="points-item" v-if="orderInfo.actualPoints">
                    <view class="points-label">实际积分</view>
                    <view class="points-value highlight">+{{ orderInfo.actualPoints }}</view>
                </view>
            </view>
        </view>

        <!-- 操作按钮区域 -->
        <view class="action-area">
            <button class="action-button cancel" v-if="orderInfo.statusCode === 'waiting'"
                @click="cancelOrder">取消预约</button>
            <button class="action-button primary" v-if="orderInfo.statusCode === 'completed'"
                @click="viewPoints">查看积分</button>
            <button class="action-button primary" v-if="orderInfo.statusCode === 'waiting'"
                @click="contactService">联系客服</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            orderId: '',
            orderInfo: {
                orderNo: 'R20230615001',
                statusCode: 'waiting',
                statusText: '等待回收',
                statusDescription: '回收员将在预约时间上门取件，请保持电话畅通',
                appointmentTime: '2023-06-15 14:00-16:00',
                recycleContent: '衣物回收',
                estimatedWeight: '5',
                actualWeight: '',
                address: {
                    name: '张三',
                    phone: '13812345678',
                    detail: '北京市朝阳区建国路88号公寓 3号楼 2单元 303室'
                },
                remark: '请提前电话联系',
                estimatedPoints: 50,
                actualPoints: 0
            }
        };
    },
    onLoad(options) {
        if (options.id) {
            this.orderId = options.id;
            // 实际应用中应通过API获取订单详情
            this.fetchOrderDetail();
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },

        // 获取订单详情
        fetchOrderDetail() {
            // 模拟API请求
            console.log('获取订单详情：', this.orderId);

            // 随机模拟不同状态的订单
            const randomStatus = Math.floor(Math.random() * 3);
            if (randomStatus === 1) {
                this.orderInfo.statusCode = 'processing';
                this.orderInfo.statusText = '回收中';
                this.orderInfo.statusDescription = '回收员正在上门取件中，请保持电话畅通';
            } else if (randomStatus === 2) {
                this.orderInfo.statusCode = 'completed';
                this.orderInfo.statusText = '已完成';
                this.orderInfo.statusDescription = '回收已完成，感谢您的参与';
                this.orderInfo.actualWeight = '5.5';
                this.orderInfo.actualPoints = 55;
            }

            // 使用传入的ID更新订单号
            if (this.orderId.startsWith('R')) {
                this.orderInfo.orderNo = this.orderId;
            }
        },

        // 取消预约
        cancelOrder() {
            uni.showModal({
                title: '取消预约',
                content: '确定要取消本次预约回收吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '取消中...'
                        });

                        setTimeout(() => {
                            uni.hideLoading();
                            uni.showToast({
                                title: '取消成功',
                                icon: 'success'
                            });

                            // 更新订单状态
                            this.orderInfo.statusCode = 'cancelled';
                            this.orderInfo.statusText = '已取消';
                            this.orderInfo.statusDescription = '订单已取消';

                            // 返回上一页
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        }, 1000);
                    }
                }
            });
        },

        // 查看积分
        viewPoints() {
            uni.switchTab({
                url: '/pages/points/index'
            });
        },

        // 联系客服
        contactService() {
            uni.showModal({
                title: '联系客服',
                content: '客服电话：400-123-4567\n服务时间：8:00-20:00',
                confirmText: '拨打',
                success: (res) => {
                    if (res.confirm) {
                        uni.makePhoneCall({
                            phoneNumber: '4001234567'
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss">
@import '@/styles/global.scss';

.order-detail-container {
    background-color: $bg-color;
    min-height: 100vh;
}

/* 头部导航 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: $card-bg;
    position: relative;

    .back-button {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-title {
        font-size: 36rpx;
        font-weight: bold;
    }

    .placeholder {
        width: 60rpx;
    }
}

/* 订单状态卡片 */
.status-card {
    background-color: $primary-green;
    padding: 40rpx 30rpx;
    color: $text-white;

    .status-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .status-label {
            font-size: 32rpx;
        }

        .status-value {
            font-size: 32rpx;
            font-weight: bold;

            &.status-waiting {
                color: $text-white;
            }

            &.status-processing {
                color: $status-warning;
            }

            &.status-completed {
                color: $text-white;
            }

            &.status-cancelled {
                color: $status-error;
            }
        }
    }

    .status-desc {
        font-size: 26rpx;
        opacity: 0.9;
    }
}

/* 内容卡片 */
.section {
    background-color: $card-bg;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 10rpx;

    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: $text-black;
    }
}

/* 订单信息卡片 */
.info-card {
    .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .info-label {
            color: $text-light-gray;
            font-size: 28rpx;
        }

        .info-value {
            color: $text-black;
            font-size: 28rpx;
            font-weight: 500;
        }
    }
}

/* 地址卡片 */
.address-card {
    .address-content {
        .contact-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15rpx;

            .contact-name {
                font-size: 30rpx;
                font-weight: bold;
            }

            .contact-phone {
                font-size: 28rpx;
            }
        }

        .address-detail {
            font-size: 28rpx;
            color: $text-gray;
            line-height: 1.5;
        }
    }
}

/* 备注卡片 */
.remark-card {
    .remark-content {
        font-size: 28rpx;
        color: $text-gray;
        line-height: 1.5;
    }
}

/* 积分卡片 */
.points-card {
    .points-content {
        .points-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .points-label {
                font-size: 28rpx;
                color: $text-light-gray;
            }

            .points-value {
                font-size: 28rpx;
                color: $points-orange;
                font-weight: bold;

                &.highlight {
                    font-size: 32rpx;
                    color: $status-error;
                }
            }
        }
    }
}

/* 操作按钮区域 */
.action-area {
    padding: 30rpx;
    display: flex;
    justify-content: space-around;

    .action-button {
        flex: 1;
        margin: 0 15rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;

        &.primary {
            background-color: $primary-green;
            color: $text-white;
        }

        &.cancel {
            background-color: $card-bg;
            color: $text-light-gray;
            border: 1rpx solid $border-color;
        }
    }
}
</style>